<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="关键字">
  <meta name="Description" content="简要介绍">
  <title>16-表单-登录</title>
  <style>
	ul,ol{
		padding: 0;
		list-style:none;
	}
	body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt{
		margin: 0;
	}
	.clearfix:after{
		display:block;
		clear:both;
		content:"";
	}
	.wrap{
		position: relative;
		min-width:1000px;
		width: 100%;
		height: 600px;
		background:#215ce9 url("../images/1-bj.png") center no-repeat;
	}
	.wrap .login{
		position: absolute;
		right:10%;
		top:20%;
		width: 300px;
		padding: 30px 20px;
		background-color: #fff;
	}
	.wrap .login h3{
		font-size: 16px;
		color: #3c3c3c;
	}
	.wrap .login .other{
		position: absolute;
		top:10px;
		right:4px;
	}
	.wrap .other p{
		position: relative;
		float: left;
		padding: 4px 12px;
		border:1px solid #F3D995;
		font-size: 12px;
	}
	.wrap .other p:after,.wrap .other p:before{
		position: absolute;
		top:0;
		bottom:0;
		right:-12px;
		width: 0;
		height: 0;
		margin: auto 0;
		border:6px solid rgba(0,0,0,0);
		border-left-color: #F3D995;
		content:"";
	}
	.wrap .other p:after{
		right: -11px;
		border-left-color: #ffffcc;
	}
	.wrap .other i{
		float: left;
		width: 50px;
		height: 50px;
		background:url("../images/erweima.png") 0 0/cover;
	}
	.wrap .other i:after{
		display:block;
		width: 0;
		height: 0;
		border:25px solid rgba(0,0,0,0);
		border-left-color: #fff;
		border-bottom-color: #fff;
		content:"";
	}
	.login form div{
		position: relative;
		margin-top: 20px;
	}
	.login form label{
		position: absolute;
		top:1px;
		left:1px;
		width: 40px;
		height: 40px;
		background:#ccc  center/cover;
	}
	.login form .user{
		background-image: url("../images/num.png");
	}
	.login form .pwd{
		background-image: url("../images/pwd.png");
	}
	.login form input{
		width: 248px;
		height: 40px;
		padding: 0 0 0 50px;
		border:1px solid #ccc;
		/* text-indent: 50px; */
	}
	.login form .btn{
		width: 300px;
		padding: 0;
		margin-top: 20px;
		border: 0;
		background-color: #f00;
		color: #fff;
		font-size: 16px;
		border-radius:4px;
	}
	.login .help{
		margin-top: 20px;
		margin-bottom: 50px;
		font-size: 12px;
		text-align: right;
	}
	.login .help a{
		color: #666;
		text-decoration: none;
	}
  </style>
 </head>
 <body>
	<div class="wrap">
		<div class="login clearfix">
			<h3>密码登录</h3>
			<div class="other">
				<p>扫码登录更安全</p>
				<i></i>
			</div>
			<form action="#" id="login" method="post">
				<div>
					<label for="number" class="user"></label>
					<input type="text" placeholder="请输入你的账号" id="number">
				</div>
				<div>
					<label for="pwd" class="pwd"></label>
					<input type="password" placeholder="请输入你的账号" id="pwd">
				</div>
				<input type="submit" value="登 录" class="btn">
			</form>
			<p class="help">
				<a href="#">忘记密码</a>
				<a href="#">忘记会员名</a>
				<a href="#">免费注册</a>
			</p>
		</div>
	</div>
	<!--
		伪元素除了用来清除浮动，一般的用法用来做装饰
	-->
 </body>
</html>
